<template>
	<div class="right-menu">
		<!-- 引入标签 快速入口 例如消息/邮件等等-->
		<template>
			
		</template>
		<!-- 用户个人信息快捷入口-->
		<el-dropdown>
			<!-- 用户头像信息 用户名称 -->
			<span class="avatar-wrapper">
				<!-- 用户头像 如果获取不到 显示默认头像-->
				<el-avatar :size="25" :src="userAvatar" @error="errorImageHandler">
					<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
				</el-avatar>
				<!-- 用户名-->
				<span>{{ userName }}</span>
			</span>
			<!-- 点击用户头像 下拉快速入口 -->
			<el-dropdown-menu slot="dropdown">
				<router-link to="/">
					<el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
				</router-link>
				<router-link to="/">
					<el-dropdown-item icon="el-icon-setting">系统设置</el-dropdown-item>
				</router-link>
				<!-- divided 是否显示分割线 默认为false-->
				<el-dropdown-item divided icon="el-icon-switch-button" @click.native="handleLogout">退出登录</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
export default{
	computed:{
		...mapGetters([
			'userName',
			'userAvatar'
		]),
		...mapActions([
			'Logout'
		])
	},
	methods:{
		//点击退出登录
		handleLogout(){
			this.$confirm('真的要注销登录吗 ?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				//点击确定操作
				return this.Logout({}).then(() => {
					this.$router.push(`/login?redirect=${this.$route.fullPath}`)
				}).catch(err => {
					this.$message({
						showClose: true,
						type: 'error',
						message: err.message
					})
				})
			}).catch(() => {
				//点击取消操作时候不做处理
			});
		},
		errorImageHandler(){
			return true
		}
	}
}
</script>

<style scoped="scoped">
.right-menu{
	float: right;
	height: 100%;
	line-height: 50px;
	&:focus {
		outline: none;
	}
}
.avatar-wrapper{
	
}
</style>
